<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"答案列表"</title>
    <meta charset="UTF-8">
    <title>试题类型列表</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <div style="float: left;">
        <el-button type="primary" @click="showAddPage">添加答案</el-button>
        <el-button type="danger" @click="deleteMany()">批量删除</el-button>
    </div>
    <!-- 试题类型列表 -->
    <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="optionId" label="答案id" width="120">
        </el-table-column>
        <el-table-column prop="questionId" label="题目Id" width="240">
        </el-table-column>
        <el-table-column prop="score" label="答案分数" width="240">
        </el-table-column>
        <el-table-column prop="optionText" label="答案内容" width="350">
        </el-table-column>

        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditOption(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteOption(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10,20,30]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加答案信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="答案id" prop="optionId" v-show="false">
                <el-input v-model="formData.optionId"></el-input>
            </el-form-item>
            <el-form-item label="试题id" prop="questionId" v-show="true">
                <el-input v-model="formData.questionId"></el-input>
            </el-form-item>
            <el-form-item label="答案分数" prop="score" v-show="true">
                <el-input v-model="formData.score"></el-input>
            </el-form-item>
            <el-form-item label="答案内容" prop="optionText" v-show="true">
                <el-input v-model="formData.optionText"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addOption()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="修改答案信息" :visible.sync=" dialogTableVisible4edit" @close="resetForm('editForm')">
        <el-form :model="editFormData" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="答案id" prop="optionId" v-show="false">
                <el-input v-model="editFormData.optionId"></el-input>
            </el-form-item>
            <el-form-item label="试题id" prop="questionId" v-show="true">
                <el-input v-model="editFormData.questionId"></el-input>
            </el-form-item>
            <el-form-item label="答案分数" prop="score" v-show="true">
                <el-input v-model="editFormData.score"></el-input>
            </el-form-item>
            <el-form-item label="答案内容" prop="optionText" v-show="true">
                <el-input v-model="editFormData.optionText"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="updateOption()">添加</el-button>
                <el-button @click="resetForm('editForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            multipleSelection: [],//全选框
            pagination: {
                currentPage: 1, //当前页
                pageSize: 10,    //每页显示条数
                total: 0        //总条数
            },
            option: {},
            rules: {}
        },
        methods: {
            //批量删除
            deleteMany() {
                this.$alert('确定删除?', '删除提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        let num = "";
                        for (let el of this.multipleSelection) {
                            num += el.questionId + ",";
                        }
                        axios.delete("../option/many/" + num)
                            .then(resp => {
                                if (resp.data) {
                                    action = "删除成功!";
                                    this.selectByPage();
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${action}`
                                    });
                                } else {
                                    action = "删除失败!";
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${action}`
                                    });
                                }
                            })
                            .catch(error => {
                                console.log(error);
                            })

                    }
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //删除试题类型信息
            deleteOption(row) {
                this.$confirm('此操作将永久删除' + row.questionId + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("../option/" + row.optionId)
                        .then(resp => {
                            if (resp.data) {
                                this.dialogTableVisible4edit = false;
                                this.selectByPage();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                if (confirm("确定要删除" + row.optionId + "数据吗?")) {

                }
            },
            //修改试题类型信息
            updateOption() {
                axios.put("../option", this.editFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.dialogTableVisible4edit = false;
                            this.selectByPage();
                        } else {
                            alert("修改失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //添加问题
            addOption() {
                axios.post("../option", this.formData)
                    .then(resp => {
                        if (resp.data) {
                            this.dialogTableVisible4add = false;
                            this.selectByPage();
                        } else {
                            alert("添加失败");
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //分页查询
            selectByPage() {
                axios.get("../option/" + this.pagination.currentPage + "/" + this.pagination.pageSize)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.records;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.current;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            showAddPage() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditOption(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据
                this.editFormData = {
                    optionId: row.optionId,
                    questionId: row.questionId,
                    score: row.score,
                    optionText: row.optionText,
                }
            }
        },
        mounted() {
            this.selectByPage();
        }
    })
</script>
</body>
</html>